<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>   
    <title>Nu-LightBox Image Gallery</title>
    <link charset="utf-8" title="no title" media="screen" type="text/css" href="script/style.css" rel="stylesheet"/>    
    <script type="text/javascript" language="javascript" src="script/jquery-1.3.1.js"></script>    
    <script type="text/javascript" language="javascript" src="script/swap.js"></script>
    <script type="text/javascript" language="javascript" src="script/CoordinateCalculator.js"></script>
    <script type="text/javascript" language="javascript" src="script/ImageSlider.js"></script>    
    <script type="text/javascript" language="javascript" src="script/ImgPreview.js"></script>        
    <script type="text/javascript" language="javascript" src="script/jqshuffle.js"></script>
    <script type="text/javascript" language="javascript" src="script/AnimationLogic.js"></script>
    <script type="text/javascript" language="javascript" src="script/tooltip.jquery.js"></script>
    
    <script type="text/javascript">

    $(document).ready(function() {
        		
        //TODO: Shuffling the images are just too complicated consider moving it into a different animation all together		      
		$('#imgWrapper').spreadPhotos();	            
		$('#mouseInteractionArea').setupArea();	
		$(this).initPreview($('#imgWrapper img'),$("#prevWindow"),$("#imgSrc"));
		
		$('#stackInstruction').hide();
		
		$('#reStackBtn').click(function(){
			$(this).spreadAllPhotos();
			$('#stackInstruction').fadeIn();
		});
					
	});
    
	</script>

	<script type="text/javascript">
		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
		try {
		var pageTracker = _gat._getTracker("UA-12857821-2");
		pageTracker._trackPageview();
		} catch(err) {}
	</script>

  </head>

  
  <body>
    
  <div id="mouseInteractionArea">

    	<div id="imgWrapper" class="leftCol">
    	
    		
			<img  class="imgClip thumbnail" src="img/desk.jpg" style="-moz-transform:rotate(9deg);z-index: 8; " alt="http://design-milk.com/ali-sandifer/"/>				    
		    <img  class="imgClip thumbnail" src="img/iamyou.jpg" style="-moz-transform:rotate(-17deg);z-index: 7; " alt="http://www.buro-gds.com/07/files/gimgs/11_i-am-you7.jpg"/>
	      	<img  class="imgClip thumbnail" src="img/namecard.jpg" style="-moz-transform:rotate(11deg);z-index: 6; " alt="http://www.studiomakgill.com/disciplines/identities/the_lollipop_shoppe/details#img224"/>
	  		<img  class="imgClip thumbnail" src="img/work.jpg" style="-moz-transform:rotate(20deg);z-index: 5;" alt="http://gatekeeper.tumblr.com/post/184815865"/>
	  		<img  class="imgClip thumbnail" src="img/rockethead.jpg" style="-moz-transform:rotate(-20deg);z-index: 4;" alt="http://www.butdoesitfloat.com/259536/The-only-way-of-discovering-the-limits-of-the-possible-is-to-venture"/>
	  		<img  class="imgClip thumbnail" src="img/coffee.jpg" style="-moz-transform:rotate(15deg);z-index: 3;" alt="http://lovelypackage.com/rewind-coffee/"/>	  	
	  		<img  class="imgClip thumbnail" src="img/crayon.jpg" style="-moz-transform:rotate(-5deg);z-index: 2;" alt="http://www.designboom.com/weblog/index.php"/>
	  		<img  class="imgClip thumbnail" src="img/nike.jpg" style="-moz-transform:rotate(12deg);z-index: 1;" alt="http://www.arcadeagency.com/pages/projects/nsw-winter/"/>	  		
	  		<img  class="imgClip thumbnail" src="img/cups.jpg" style="-moz-transform:rotate(16deg);z-index: 0;" alt="http://wink-mpls.com/sundries/sundries.html"/>	  			  	
		</div>


	<div id="buttons">
		<div id="reStackBtn" class="btn"> Restack Image </div>
		<br/><br/>	
		<p id="stackInstruction">Click any 2 photo to rearrange them</p>
	</div>

	<div id="previewArea" style="display:none">
	  	<img  class="imgClip" id="prevWindow" src="nosrc" alt=""></img><br/>
	  	<a id="imgSrc" href=";" ></a>
  	</div>

  </div>
  
  <div class="siteInfo">

  <h1>Nu-Lightbox:</h1><br/>
  This image gallery is my first experiment with jQuery. 
  I have to admit jQuery has simplified the task of writing java script tremendously.
  There are still a lot of improvements to this image gallery, both in term of design
  and jQuery coding. I hope to further improve this image gallery in the future. 
  This image gallery has been tested with Firefox 3.5.7 in Ubuntu and Windows XP with 1280 x 800 and 1440 x 900 screen resolution .
  Read how nu-lightbox is developed in <a href="http://zfranciscus.wordpress.com/category/nu-lightbox/" target="_blank">my blog</a>. 

  
  <h1>Licence :</h1>  
  Nu-Lightbox by  <a href="http://zfranciscus.wordpress.com" target="_blank" rel="cc:attributionURL">
  Zainul Franciscus</a> is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/3.0/nz/">
  Creative Commons Attribution-Non-Commercial-Share Alike 3.0 New Zealand License</a>.Based on <a href="http://www.flickr.com/photos/azaraskin/4275358271/sizes/o/" target="_blank" rel="dc:source">
  Aza Raskin work</a>.<br/><br/>	  
  <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/nz/">
  	<img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/nz/88x31.png" />
  </a><br/>
  </div> 

  </body>
</html>


